Merge pull request #5535 from mozilla/MPP-4157-remove-get-relay-extension-banner

MPP-4157 Remove Get Relay Extension Banner

Author: groovecoder

frontend/src/components/dashboard/ProfileBanners.tsx

@@ -11,7 +11,6 @@ import {
 } from "../../functions/getPlan";
 import {
   isUsingFirefox,
-  supportsChromeExtension,
   supportsFirefoxExtension,
 } from "../../functions/userAgent";
 import { ProfileData } from "../../hooks/api/profile";
@@ -81,7 +80,7 @@ export const ProfileBanners = (props: Props) => {
 
   // Don't show the "Get Firefox" banner if we have an extension available,
   // to avoid banner overload:
-  if (!isUsingFirefox() && (!supportsChromeExtension() || !isLargeScreen)) {
+  if (!isUsingFirefox() || !isLargeScreen) {
     banners.push(<NoFirefoxBanner key="firefox-banner" />);
   }
 
@@ -100,18 +99,6 @@ export const ProfileBanners = (props: Props) => {
     );
   }
 
-  if (supportsChromeExtension() && isLargeScreen) {
-    // This pushes a banner promoting the add-on - detecting the add-on
-    // and determining whether to show it based on that is a bit slow,
-    // so we'll just let the add-on hide it:
-    banners.push(
-      <NoChromeExtensionBanner
-        profileData={props.profile}
-        key="chrome-extension-banner"
-      />,
-    );
-  }
-
   return <div className={styles["profile-banners"]}>{banners}</div>;
 };
 
@@ -214,51 +201,6 @@ const NoAddonBanner = (props: NoAddonBannerProps) => {
   );
 };
 
-type NoChromeExtensionBannerProps = {
-  profileData: ProfileData;
-};
-
-// make dismissble
-const NoChromeExtensionBanner = (props: NoChromeExtensionBannerProps) => {
-  const l10n = useL10n();
-  const gaEvent = useGaEvent();
-
-  return (
-    <Banner
-      type="promo"
-      title={l10n.getString(
-        "banner-download-install-chrome-extension-headline",
-      )}
-      illustration={{
-        img: <Image src={AddonIllustration} alt="" width={60} height={60} />,
-      }}
-      cta={{
-        target:
-          "https://chrome.google.com/webstore/detail/firefox-relay/lknpoadjjkjcmjhbjpcljdednccbldeb?utm_source=fx-relay&utm_medium=banner&utm_campaign=install-addon",
-        content: l10n.getString("banner-download-install-chrome-extension-cta"),
-        size: "large",
-        gaViewPing: {
-          category: "Download Extension",
-          label: "profile-banner-download-chrome-extension",
-        },
-        onClick: () => {
-          gaEvent({
-            category: "Download Firefox",
-            action: "Engage",
-            label: "profile-banner-download-chrome-extension",
-          });
-        },
-      }}
-      hiddenWithAddon={true}
-      dismissal={{
-        key: `no-chrome-extension-banner-${props.profileData.id}`,
-      }}
-    >
-      <p>{l10n.getString("banner-download-install-chrome-extension-copy-2")}</p>
-    </Banner>
-  );
-};
-
 type BundleBannerProps = {
   runtimeData: RuntimeDataWithBundleAvailable;
   profileData: ProfileData;

frontend/src/pages/accounts/profile.test.tsx

@@ -300,25 +300,6 @@ describe("The dashboard", () => {
     expect(firefoxBanner).toBeInTheDocument();
   });
 
-  it("shows a banner to download the Chrome extension if using a different browser that supports Chrome extensions", () => {
-    // navigator.userAgent is read-only, so we use `Object.defineProperty`
-    // as a workaround to be able to replace it with mock data anyway:
-    const previousUserAgent = navigator.userAgent;
-    Object.defineProperty(navigator, "userAgent", {
-      value:
-        "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36",
-      configurable: true,
-    });
-    render(<Profile />);
-    Object.defineProperty(navigator, "userAgent", { value: previousUserAgent });
-
-    const chromeExtensionBanner = screen.getByRole("link", {
-      name: "l10n string: [banner-download-install-chrome-extension-cta], with vars: {}",
-    });
-
-    expect(chromeExtensionBanner).toBeInTheDocument();
-  });
-
   it("shows a banner to download Firefox if using a different browser that on desktop supports Chrome extensions, but is running on a small screen and thus probably does not support extensions", () => {
     // navigator.userAgent is read-only, so we use `Object.defineProperty`
     // as a workaround to be able to replace it with mock data anyway:
@@ -333,14 +314,10 @@ describe("The dashboard", () => {
     setMockMinViewportWidth(true);
     Object.defineProperty(navigator, "userAgent", { value: previousUserAgent });
 
-    const chromeExtensionBanner = screen.queryByRole("link", {
-      name: "l10n string: [banner-download-install-chrome-extension-cta], with vars: {}",
-    });
     const firefoxBanner = screen.getByRole("link", {
       name: "l10n string: [banner-download-firefox-cta], with vars: {}",
     });
 
-    expect(chromeExtensionBanner).not.toBeInTheDocument();
     expect(firefoxBanner).toBeInTheDocument();
   });